<template>
  <!-- 作用域插槽 -->
  <!-- 作用：让插槽内容能够访问子组件中才有的数据 -->
  <!-- 在插槽的基础上，传递数据 -->
  <!-- 具体操作：子组件在slot标签里绑定数据，在父组件中使用子组件时，通过slotProps获取到绑定的数据，然后使用 -->

  <!-- 旧的写法，已废弃：<template slot="default" slot-scope="slotProps"></template> -->
  <div class="scope">
    <c1>
      <!-- 如果是默认插槽，完整写法为v-slot:default="slotProps" -->
      <!-- 默认插槽情况下，可以缩写为v-slot="slotProps" -->
      <!-- 还可以写作#default="slotProps" -->
      <!-- 但是不能写作#="slotProps" -->
      <template v-slot:default="slotProps">
        我是{{ slotProps.user.name }}，我今年{{ slotProps.user.age }}岁了
      </template>
      <!-- 还可以对slotProps进行解构 -->
      <template #main="{ user }">
        我是{{ user.name }}，我今年{{ user.age }}岁了，我是{{ user.gender ? '男生' : '女生' }}哦~
      </template>
    </c1>
  </div>
</template>

<script>
import c1 from './c1.vue'

export default {
  name: 'ScopeSlot',
  components: { c1 },
}
</script>